<template>
  <div class="page-bg">
    <div class="mint-container">
      <h2 class="market-title">铸造 NFT</h2>
      <form @submit.prevent="handleMint" class="mint-form">
        <div class="form-group">
          <label class="form-label">NFT 图片链接（tokenURI）</label>
          <input
            v-model="tokenURI"
            class="form-input"
            placeholder=""
            required
          >
        </div>
        <button
          class="buy-btn mint-btn"
          :disabled="minting"
          type="submit"
        >
          <span v-if="minting" class="minting-dot"></span>
          {{ minting ? "铸造中..." : "立即铸造" }}
        </button>
      </form>
      <div v-if="mintSuccess" class="tip-box tip-success">
        <span class="icon">✔️</span> NFT 铸造成功！
      </div>
      <div v-if="errorMsg" class="tip-box tip-error">
        <span class="icon">❌</span> {{ errorMsg }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { mintToken } from "../utils/contract";

const tokenURI = ref("");
const minting = ref(false);
const mintSuccess = ref(false);
const errorMsg = ref("");

async function handleMint() {
  if (!window.ethereum) return alert("请先安装并连接钱包");
  errorMsg.value = "";
  mintSuccess.value = false;
  minting.value = true;
  try {
    await mintToken(tokenURI.value.trim());
    mintSuccess.value = true;
    tokenURI.value = "";
  } catch (e) {
    errorMsg.value = e.data?.message || e.message || "铸造失败";
  }
  minting.value = false;
}
</script>
<style scoped>
/* 公共背景，与市场/我的NFT页一致 */
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 0;
}

/* 与其他页面统一的卡片大容器 */
.mint-container {
  max-width: 950px;
  margin: 40px auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 6px 32px rgba(50,60,80,0.09);
  padding: 40px 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 标题与市场页统一 */
.market-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: #21344c;
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 2px;
}

/* 表单整体 */
.mint-form {
  width: 100%;
}

/* 表单组与标签 */
.form-group {
  margin-bottom: 28px;
}
.form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 1.04rem;
  color: #32518a;
  font-weight: 500;
}

/* 输入框样式，聚焦主色描边 */
.form-input {
  width: 100%;
  border: 1.6px solid #dde2ef;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 1.08em;
  outline: none;
  transition: border-color .18s, box-shadow .17s;
  background: #f9fbfe;
  color: #21344c;
  box-shadow: 0 1px 4px rgba(180,190,210,0.04);
}
.form-input:focus {
  border-color: #376ee6;
  box-shadow: 0 2px 10px rgba(90,120,200,0.11);
}

/* 按钮 - 沿用商务蓝主色 */
.buy-btn, .mint-btn {
  background: #376ee6;
  color: #fff;
  font-size: 1.07em;
  font-weight: 600;
  border: none;
  border-radius: 13px;
  padding: 10px 0;
  width: 100%;
  margin-top: 4px;
  box-shadow: 0 1px 3px rgba(80,120,200,0.07);
  cursor: pointer;
  transition: background .18s, box-shadow .16s, opacity .13s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.buy-btn:hover:enabled, .mint-btn:hover:enabled {
  background: #2656ba;
}
.buy-btn:disabled, .mint-btn:disabled {
  background: #b6c6e5;
  color: #ecf0fa;
  opacity: .66;
  cursor: not-allowed;
}

/* 铸造中动画小圆点 */
.minting-dot {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: #f6f9fc;
  margin-right: 8px;
  border: 3px solid #60cd99;
  border-right-color: transparent;
  animation: mint-spin .68s linear infinite;
  vertical-align: -1.5px;
}
@keyframes mint-spin {
  100% { transform: rotate(360deg);}
}

/* 提示信息卡片化，带icon */
.tip-box {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  border-radius: 9px;
  font-size: 1.08em;
  padding: 13px 14px;
  font-weight: 500;
  box-shadow: 0 1px 7px rgba(70,110,110,0.05);
  width: 100%;
  justify-content: center;
  word-break: break-all;
}
.tip-success {
  background: #edfcf7;
  color: #24a65e;
  border: 1.4px solid #c2f1e0;
}
.tip-error {
  background: #fff3f1;
  color: #ec4141;
  border: 1.4px solid #faccca;
}
.icon {
  font-size: 1.25em;
}

@media (max-width: 600px) {
  .mint-container {
    padding: 17px 4vw 13vw;
    border-radius: 16px;
  }
  .market-title { font-size: 1.45rem;}
}
</style>
